<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>

    <div id="progress" style="background: red"></div>
    <button id="btn">点我</button>
    <script>
      /**
       * requestAnimationFrame(callback) 由浏览器专门为动画提供的API
       * cancelAnimationFrame(返回值) 清除动画
       * <16.7 丢帧
       * >16.7 跳跃 卡顿
       */
      window.onload = function () {
        function test() {
          const div = document.querySelector("div#progress");
          const button = document.querySelector("button#btn");

          let start, timer;

          function progress(rAfTime) {
            div.style.width = div.offsetWidth + 1 + "px";
            div.innerHTML = div.offsetWidth + "%";
            if (div.offsetWidth < 100) {
              let current = Date.now();
              console.log(current - start + "ms");
              start = current;
              timer = requestAnimationFrame(progress);
            }
          }

          button.onclick = () => {
            div.style.width = 0;
            start = Date.now();
            requestAnimationFrame(progress);
          };
        }
        test();
      };
    </script>
  </body>
</html>
